<style>
/*清风焦点轮播样式*/
#qf_<{$widgets_id}>,
#qf_<{$widgets_id}> .slider-body,
#qf_<{$widgets_id}> .slider-main li {width:<{$setting.width}>px;height:<{$setting.height}>px;}
#qf_<{$widgets_id}>,#qf_<{$widgets_id}> .slider-body {position:relative;overflow:hidden;}
#qf_<{$widgets_id}> .slider-main li {float:left;}
#qf_<{$widgets_id}> .slider-nav {width:100%;height:10px;line-height:0;text-align:center;bottom:8px;cursor:default;position:absolute;z-index:4;padding-bottom:5px}
#qf_<{$widgets_id}> .slider-nav ul {height:0;line-height:0}
#qf_<{$widgets_id}> .slider-nav li {display:inline-block;*display:inline;*zoom:1;width:10px;height:10px;font-size:0;margin:0 2px;background:<{$setting.bgcolor}>;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;text-align:center;color:<{$setting.color}>;overflow:hidden;cursor:pointer}
#qf_<{$widgets_id}> .slider-nav .active {background:<{$setting.hbgcolor}>;color:<{$setting.hcolor}>}
#qf_<{$widgets_id}> .slider-page {display:none}
#qf_<{$widgets_id}> .slider-page a{position:absolute;top:50%;margin-top:-31px;z-index:3;display:block;width:28px;height:62px;line-height:62px;background:gray;background:rgba(0,0,0,.2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);color:#fff;text-align:center;font-size:22px;font-weight:400;font-family:simsun}
#qf_<{$widgets_id}> .slider-page a:hover{text-decoration:none;color:#fff}
#qf_<{$widgets_id}> .slider-page .prev {left:0}
#qf_<{$widgets_id}> .slider-page .next {right:0}
</style>
<div class="slider" id="qf_<{$widgets_id}>">
    <div class="slider-body">
      <ul class="slider-main clearfix">
      	<{foreach from=$data.focus item=item key=key name=qf}>
          <li class="slider-panel"><a href="<{$item.tolink}>" target="_blank"><img width="<{$setting.width}>" height="<{$setting.height}>" src="<{$item.imgurl}>"  alt="<{$item.title}>" /></a> </li>
        <{/foreach}>
      </ul>
  </div>
  <div class="slider-nav">
    <ul>
    	<{assign var="do" value="1"}>
    	<{foreach from=$data.focus item=item key=key}>
      	<li class="slider-item<{if $do==1}> active<{/if}>"><{$do}></li>
        <{assign var="do" value=$do+1}>
        <{/foreach}>
    </ul>
  </div>
   <div class="slider-page"><a class="prev" href="javascript:void(0)">&lt;</a><a class="next" href="javascript:void(0)">&gt;</a></div>
</div>
<!--<script src="images/qf-focus.js"></script>--><!--当在一个页面中会多次调用此挂件时，请务必将此js放到<head>与</head>之间-->
<script type="text/javascript">
window.addEvent("domready",function(){
	<{if $setting.effect !='fade'}>
	new scrollFocus ('qf_<{$widgets_id}>',{
		'duration':<{$setting.duration}>,
		'delay':<{$setting.delay}>,
		'periodical':<{$setting.periodical}>,
		'direction':'<{$setting.effect}>',
		'autoplay':<{$setting.autoplay}> 
	});
	<{else}>
	new fadeFocus ('qf_<{$widgets_id}>',{
		'duration':<{$setting.duration}>,
		'delay':<{$setting.delay}>,
		'periodical':<{$setting.periodical}>,
		'autoplay':<{$setting.autoplay}> 
	});
	<{/if}>
	 /*左右滚动的显示控制*/
	$('qf_<{$widgets_id}>').addEvents({
		'mouseenter':function(){
			this.getElement(".slider-page").setStyle('display','block');
		},
		'mouseleave':function(){
			this.getElement(".slider-page").setStyle('display','none');
		}
	});
})
</script>